<template lang="html">
  <div class="exesettings">
    <div class="breadNav">
      <el-breadcrumb separator="/" class="">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>执行人设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="exeMain">
      <div class="grid-content" style="margin-bottom:20px"><el-button type="primary" @click="contbuild()">关联大楼</el-button><el-button type="primary" @click="addgroup()">新增</el-button></div>
      <template v-loading="loading">
        <el-table
          :data="list"
          stripe
          border
          style="width: 100%">
          <el-table-column
            prop="C_MemberName"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="C_OperatorNum"
            label="工号">
          </el-table-column>
          <el-table-column
            prop="C_GroupName"
            label="服务班组">
          </el-table-column>
          <el-table-column
            prop="I_GradeID"
            label="职位">
            <template scope="scope">
              <span v-if="scope.row.I_GradeID == 1">站长</span>
              <span v-if="scope.row.I_GradeID == 0">修理工</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="C_PhoneNum"
            label="手机号">
          </el-table-column>
          <el-table-column
            prop="C_Remark"
            label="备注">
          </el-table-column>
          <el-table-column
            prop=""
            label="操作">
            <template scope="scope">
              <el-button
                size="small"
                @click="editperson(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="small"
                type="danger"
                @click="delperson(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="groupfix" v-show="edit || contect"></div>
    <div class="exesetCon" v-show="edit">
      <div class="groupcontitle" v-if="cmdtype == 'add'">
        新增执行人
      </div>
      <div class="groupcontitle" v-if="cmdtype == 'edit'">
        编辑执行人
      </div>
      <div style="width:440px;padding:20px">
        <el-form ref="form" :model="form" label-width="80px" style="margin-top:20px">
          <el-form-item label="班组">
            <el-select v-model="form.group1" placeholder="请选择班组" style="width:100%" v-on:change="selectLevel()">
              <el-option v-for="g in grouplist" :value="g.id" :key="g.id" :label="g.Name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input placeholder="请输入姓名" v-model="name"></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input placeholder="请输入手机号码" v-model="mobile"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input placeholder="请设置密码" v-model="password"></el-input>
          </el-form-item>
           <el-form-item label="职位">
             <el-select v-model="form.grade" placeholder="请选择职位" style="width:100%" v-on:change="selectJob()">
               <el-option :value="0" label="普通修理工"></el-option>
               <el-option :value="1" label="站长"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="备注">
             <el-input type="textarea" v-model="form.remark" :rows="4" placeholder="请输入备注"></el-input>
           </el-form-item>
           <el-form-item>
            <el-button type="primary" @click="submit()">确定</el-button>
            <el-button @click="close()">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="exesetBuild" v-show="contect">
      <div class="groupcontitle">
        关联大楼
      </div>
      <div style="padding:20px">
        <template>
          <el-form ref="form" :model="form" label-width="80px" style="margin-top:20px">
            <el-form-item label="班组">
              <el-select v-model="form.group2" placeholder="请选择班组" style="width:100%" v-on:change="selectGroup()">
                <el-option v-for="g in grouplist" :value="g.id" :key="g.id" :label="g.Name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="大楼">
              <el-select v-model="form.buildname" placeholder="请选择大楼" style="width:100%" v-on:change="selectbuild()">
                <el-option v-for="b in buildlist" :value="b.ID" :key="b.ID" :label="b.Name"></el-option>
              </el-select>
            </el-form-item>
            <div class="exetrans">
              <el-transfer v-model="value1" :data="data" :titles="['维修人员列表', '关联关系']"></el-transfer>
            </div>
            <el-form-item style="margin-top:20px">
             <el-button type="primary" @click="contactbd()">确定</el-button>
             <el-button @click="close1()">取消</el-button>
           </el-form-item>
          </el-form>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'exesettings',
  data() {
     return {
       data:[],
       value1: [],
       list:[],
       company:'',
       id:-1,
       groupid:-1,
       gradeid:-1,
       edit:false,
       form:{
         group1:'',
         group2:'',
         remark:'',
         grade:'',
         buildname:''
       },
       grouplist:[],
       mobile:'',
       name:'',
       password:'',
       cmdtype:'select', //默认获取执行人列表
       cmtp:'select', //默认获取关联关系
       operatornum:'',
       contect:false,
       buildlist:[],
       sub:false, //是否提交状态
       buildid:'',
       loading:false
     }
   },
   methods:{
     getGroup(){

       var data = {
         origin: 'WarmAppealService',
         method:'EditServiceGroup',
         Company:this.company,
         CmdType:'select',
         ID:-1,
         OwnFlag:-1,
         BushuID:-1,
       }

       const _this = this;
       this.post(this.jholdUrl,data,function(res){
         _this.grouplist = res.Data
       })
     },
     getPerson(cmdtype){
       if(cmdtype == 'add' || cmdtype == 'edit'){ //新增 && 删除
         if(this.groupid == -1){
           this.$message({
             message: '请选择服务班组',
             type: 'warning'
           });
           return;
         }else if(this.name == ''){
           this.$message({
             message: '姓名不能为空',
             type: 'warning'
           });
           return;
         }else if(this.mobile == ''|| this.mobile.length != 11){
           this.$message({
             message: '请正确输入手机号',
             type: 'warning'
           });
           return;
         }else if(this.gradeid == -1){
           this.$message({
             message: '请选择职位',
             type: 'warning'
           });
           return;
         }
       }

       var data = {
         origin:'WarmAppealService',
         method:'EditServiceMember',
         Company:this.company,
         CmdType:cmdtype,
         ID:this.id,
         groupid:this.groupid,
         gradeid:this.gradeid,
         membername:this.name,
         phonenum:this.mobile,
         operatornum:this.operatornum,
         remark:this.form.remark,
         password:this.password
       }

       this.loading = true

       const _this = this;
       this.post(this.jholdUrl,data,function(res){
         _this.loading = false
         if((_this.cmdtype == 'add' || _this.cmdtype == 'edit' || _this.cmdtype == 'del') && res.Result == '0' && _this.sub == true){
           _this.$message({
             message: '操作成功',
             type: 'success'
           });
           _this.edit = false;
         }

         if(cmdtype == 'select'){
           _this.list = res.Data;
         }

       })


     },
     getPerson2(cmdtype){  //关联大楼调户

       var data = {
         origin:'WarmAppealService',
         method:'EditServiceMember',
         Company:this.company,
         CmdType:cmdtype,
         ID:this.id,
         groupid:this.groupid,
         gradeid:this.gradeid,
         membername:this.name,
         phonenum:this.mobile,
         operatornum:this.operatornum,
         remark:this.form.remark,
         password:this.password
       }

       const _this = this;
       this.post(this.jholdUrl,data,function(res){

         if(_this.groupid != -1){  //如果已经选择服务班组
           _this.data = [];
            for (let i = 0; i < res.Data.length; i++) {
              _this.data.push({
                key: res.Data[i].ID,
                label: res.Data[i].C_MemberName
              });
            }
         }

       })

     },
     addgroup(){ //新增
       this.cmdtype = 'add'
       this.edit = true
     },
     close(){
       this.edit = false
     },
     close1(){
       this.contect = false
     },
     selectLevel(){ //新增中选择服务班组
       this.groupid = this.form.group1;
     },
     selectGroup(){ //关联大楼中选择服务班组
       this.groupid = this.form.group2;
       this.getPerson2(this.cmdtype)
     },
     selectJob(){
       this.gradeid = this.form.grade;
     },
     editperson(index,row){
       this.cmdtype = 'edit';
       this.form.group1 = row.I_GroupID;
       this.groupid = row.I_GroupID;
       this.gradeid = row.I_GradeID;
       this.mobile = row.C_PhoneNum;
       this.operatornum = row.C_OperatorNum;
       this.form.remark = row.C_Remark;
       this.name = row.C_MemberName;
       this.form.grade = row.I_GradeID;
       this.id = row.ID;
       this.edit = true;
     },
     delperson(index,row){
        this.$confirm('此操作将永久删除该执行人, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.sub = true;
          this.cmdtype = 'del';
          this.id = row.ID;
          this.getPerson(this.cmdtype)
        }).catch(() => {
          this.sub = false;
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
     },
     contbuild(){
       this.contect = true
     },
     submit(){ //提交
       this.sub = true;
       this.getPerson(this.cmdtype); //第一遍编辑 edit或者 add
       this.groupid = -1;
       this.getPerson('select')  //第二遍重置列表 select
     },
     getbushulevel(){
       var data = {
         m:'getbushulevel',
         company:this.company,
         isex:1,
         bushulevelname:'大楼'
       }

       const _this = this;
       this.post(this.commondurl,data,function(r){
         _this.buildlist = r.Data
       })
     },
     joinbuilding(){

       let convalue = new Object();
       let memberarray = new Array();
       let bulidarray = new Array();

       for(let i = 0;i<this.value1.length;i++){
         memberarray.push(this.value1[i])
         bulidarray.push(this.buildid)
       }

       convalue['MemberID'] = memberarray;
       convalue['BuildingID'] = bulidarray;

       let constr = JSON.stringify(convalue);

       var data = {
         method:'EditMemberJoinBuilding',
         Origin:'WarmAppealService',
         Company:this.company,
         GroupID:this.groupid,
         values:constr,
         cmdtype:this.cmtp
       }

       const _this = this;
       this.post(this.jholdUrl,data,function(res){
         if(res.Data == null){
           _this.value1 = [];
         }else{
           for (let i = 0; i < res.Data.length; i++) {
             if(res.Data[i].I_BuildingID == _this.form.buildname){
                 _this.value1.push(res.Data[i].I_ServiceMemberID);
             }
           }
         }  
       })
     },
     selectbuild(){
       this.value1 = [];
       this.buildid = this.form.buildname;
       this.joinbuilding()
     },
     contactbd(){ //关联大楼提交
       this.cmtp = 'edit'
       this.joinbuilding()
       this.cmtp = 'select'
     }
   },
   created(){
     let info = JSON.parse(localStorage.loginInfo);
     this.company = info.company;
     this.getGroup(this.cmdtype)
     this.getPerson(this.cmdtype)
     this.getbushulevel()
   }
}
</script>

<style lang="css">
.exeMain{
  padding: 0 20px 20px 20px
}
.exesetCon{
  width: 500px;
  height: 600px;
  background: #fff;
  position: fixed;
  left:50%;
  margin-left: -275px;
  top: 50%;
  margin-top: -310px;
  z-index: 1001
}
.exesetBuild{
  width: 700px;
  height: 600px;
  background: #fff;
  position: fixed;
  left:50%;
  margin-left: -350px;
  top: 50%;
  margin-top: -310px;
  z-index: 1001
}
.exetrans{
  padding-left: 80px
}
</style>
